<template>
  <div>
    <u-navbar :is-back="false" title="设备管理">
      <u-loading slot="loading"></u-loading>
    </u-navbar>

    <div>
      <u-image width="100%" height="300rpx" :src="src"></u-image>
    </div>

    <div class="dataList">
      <div
        class="dataList-item"
        @click="goDetailedM"
        v-for="(item, index) in dataLists"
        :key="index"
      >
        <div :style="{ padding: '1rem' }">
          <img style="width: 3rem" :src="item.img" alt="" />
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>

    <bar></bar>
  </div>
</template>

<script lang='ts' >
// import Imgsrc from '../../style/image/equiptment/5f22482c14be1.png'
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import bar from "@/pages/home/topbar.vue";



@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components: {
    bar,
  },
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  // public src = Imgsrc

  public dataLists = [
    {
      img: require("../../style/image/equiptment/eq0.png"),
      name: "我的设备",
      value: "",
    },
    {
      img: require("../../style/image/equiptment/eq0.png"),
      name: "我的设备",
      value: "",
    },
    {
      img: require("../../style/image/equiptment/eq0.png"),
      name: "我的设备",
      value: "",
    },
    {
      img: require("../../style/image/equiptment/eq0.png"),
      name: "我的设备",
      value: "",
    },
    {
      img: require("../../style/image/equiptment/eq0.png"),
      name: "我的设备",
      value: "",
    },
    {
      img: require("../../style/image/equiptment/eq0.png"),
      name: "我的设备",
      value: "",
    },
  ];

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }

  goDetailedM() {
    uni.navigateTo({
      url: "../equipment/repair",
    });
  }
}
</script>

<style  scoped>
.dataList {
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
}

.dataList-item {
  width: 33.3%;
  text-align: center;
}
</style>